<template>
	<view class="child articleListModule">
		<view class="topstyle">
			<text class="total">共上传{{list.total}}篇文章</text>
			<text class="slectsd sebefore" v-show="stylechoice" :class="{'slectsdon':showstyle?'slectsdon': ''}"
				@click="showstyle = !showstyle">{{styletext}}</text>
		</view>
		<view class="all_type_body" :class="{'openHei' : showstyle}" v-show="showstyle">
			<view class="type_body">
				<text class="type_item" v-for="(item, index) in listyle" :class="{'active': isactive == index}" :key="item.id" @click="choose(index,item.cat_name,item.cat_id)">{{item.cat_name}}</text>
			</view>
		</view>
<div class="list">
			<div class="caselist">
				<div @click="skiptodetail(item.article_relevance_id,item.article_id)"
					 v-for="(item, index) in list.data" :key="index" class="blodsqure">
					<div class="miaoshu">
						<div class="new_articletop">
							<img alt="" :src="`${item.cover_img}?x-oss-process=image/resize,m_fill,h_480,w_1065`">
							<div class="article_sign">{{item.cat_name}}</div>
						</div>
						<div class="new_articledesc">
							<p class="article_tle ellipsis_two_line_com">{{item.title}}</p>
							<div class="view_people">
								<div class="view_img">
<!-- 									<img :src="items.share_user_picture" alt=""
										 v-for="(items,index) in item.share_user_list" :key="index"> -->
									<span>{{item.view_num}}人浏览&nbsp;&nbsp;|&nbsp;&nbsp;{{item.share_num}}人分享</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- <view class="caselist">
			<view class="blodsqure item" @click="skiptoarticle(item.article_relevance_id,item.article_id)" v-for="(item,index) in list.data" :key="index">
				<div class="miaoshu">
                        <div class="new_articletop">
                            <img alt :src="item.cover_img" />
                            <div class="article_sign">{{item.cat_name}}</div>
                        </div>
                        <div class="new_articledesc">
                            <p class="article_tle ellipsis_two_line_com">{{item.title}}</p>
                            <div class="view_people">
                                <div class="view_img">
                                    <img :src="items.share_user_picture" alt v-for="(items,index) in item.share_user_list" :key="index" />
                                    <span>{{item.view_num}}浏览</span>
                                </div>
                                <div class="view_transfer">
                                    <view class="iconfont iconfenxiang"></view>
                                    {{item.share_num}}
                                </div>
                            </div>
                        </div>
                    </div>
			</view>
		</view> -->

	</view>
</template>

<script>

import { list } from '@/mixins'
import { getArticleType, getArticleList } from '@/api/article'
import { mapState } from 'vuex'

export default {
	name: 'ArticleList',
	mixins: [list],
	props: {
		ownerUserId: [Number, String]
	},
	data() {
		return {
			stylechoice: true,
			listyle: [],
			cat_id: '',
			showstyle: false,
			styletext: '全部文章',
			isactive: 0
		}
	},
	computed: {
		...mapState({
			role_id: state => state.user.basicUser.role_id
		})
	},
	methods: {
		init() {
			this.getatricletype()
			this.resetList()
			this.getloadstarte()
		},
		choose(index) {
			// 风格选择
			this.isactive = index
			this.showstyle = !this.showstyle
			this.styletext = this.listyle[index].cat_name
			this.cat_id = this.listyle[index].cat_id
			this.resetList()
			this.getloadstarte()
		},
		refresh() {
			// 下拉刷新
			this.resetList()
			this.getloadstarte(true) // 加载数据
		},
		reachBottom() {
			if (this.list.finished) {
				uni.showToast({
					title: '没有更多了',
					icon: 'none'
				})
				return
			}
			if (this.list.loading) {
				return
			}
			this.getloadstarte()
		},
		// 获取文章类型
		getatricletype() {
			getArticleType().then(res => {
				this.listyle = res.data || []
				this.listyle.unshift({ cat_name: '全部文章', cat_id: '' })
			})
		},
		getloadstarte(refresh = false) {
            		// 攻略上拉加载
			const data = {
				owner_user_id: this.ownerUserId,
				cat_id: this.cat_id,
				limit: this.list.limit,
				page: this.list.page
			}
			getArticleList(data).then(res => {
				this.completes(res)
				refresh && this.$emit('stopRefresh')
			})
		},
		skiptodetail(article_relevance_id, article_id) {
			// this.$router.push({
			//     name: 'Articledetai',
			//     query: {
			//         owner_user_id: this.owner_user_id,
			//         active: 1,
			//         gobackt: 'normal',
			//         articleid: article_relevance_id,
			//         mainId: article_id,
			//         share_user_id: this.$parent.option.share_user_id,
			//         p_share_user_id: this.$parent.option.p_share_user_id
			//     }
			// })

			  let query = {
				owner_user_id: this.ownerUserId,
				 active: 1,
				  gobackt: 'normal',
				articleid: article_relevance_id,
				mainId: article_id
			}
			const { share_user_id, p_share_user_id } = this.$parent.option
			if (share_user_id) {
				query.share_user_id = share_user_id
			}
			if (p_share_user_id) {
				query.p_share_user_id = p_share_user_id
			}
			// uni.navigateTo({
			// 	url: `/pages/getGuest/articledetail${this.commonJS.queryData(query)}`
			// })

			const startUrl = `${this.$constant.formal}/hkds/#/`
			const role_type = this.role_id == 1 || this.role_id == 1 ? 'company' : 'person'
			const returnUrl = encodeURIComponent(startUrl + role_type + '/article/detail' + this.commonJS.queryData(query))
			uni.navigateTo({
				url: `/pages/page/webview/index?returnUrl=${returnUrl}`
			})
		}
	}
}
</script>

<style scoped lang="scss">

	.list {
			background: none;
			width: 100%;
			height: auto;
			.caselist {
				width: 100%;
				background-color: #f5f5f5;
				.blodsqure {
					width: 100%;
					height: 480px;
					border-radius: 10px;
					padding-bottom: 20px;
					background: white;
					border-top: 20px solid #f5f5f5;

					.miaoshu{
						position: relative;
						height: 100%;
						float: none;
						margin-top: 20px;
						display: block;
						.new_articletop{
							width: 100%;
							height: 320px;
							position: relative;
							img{
								border-radius: 20px 20px 0 0;
								height: 100%;
								width: 100%;
							}
							.article_sign{
								height:38px;
								padding: 0 15px;
								line-height:38px;
								position: absolute;
								left: 0;
								bottom: 0;
								opacity: .6;
								background: #000;
								text-align: center;
								font-size: 24upx;
								color: #fff;
								border-radius: 0 20px 0 0;
							}
						}
					}

					.new_articledesc {
						width:100%;
						height: auto;
						box-shadow: 0 2px 8px #ddd;
						border-bottom-left-radius: 20px;
						border-bottom-right-radius: 20px;
						.article_tle {
							font-size:28px;
							font-weight:bold;
							margin:0px 0px 10px 20px;
							padding-top: 10px;
						}
						.view_people {
							width: 100%;
							height: 50px;
							color: #999999;
							font-size: 24px;
							line-height: 24px;
							margin-top: 30px;
							position: relative;
							.view_img {
								float: left;
								img {
									float: left;
									width:50px;
									height: 50px;
									background: green;
									margin-left: -30px;
									border-radius: 50%;
									&:first-child {
										margin-left: 0;
									}

								}

								span {
									float: left;
									margin-left:20px;
								}
							}
							.view_transfer {
								// float: right;
								.iconfenxiang {
									margin-right: 20px;
									font-size: 30px;
								}
							}
						}
					}
				}
			}
		}
.child {
    width: 100%;
    height: auto;
    margin-top: 20px;
    margin-bottom: 60px;
}
.looks {
    .looks_box {
        margin-right: 7px;
    }
    .eye_wrap {
        padding-left: 44px;
        background-image: url("https://wximg.meijiabang.com/hkds/miniapp/images/design/look.png");
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 35px 35px;
    }
    .fabulous_wrap {
        padding-left: 38px;
        background-image: url("https://wximg.meijiabang.com/hkds/miniapp/images/design/fabulous.png");
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 35px 35px;
    }
}

// .looks .looks_box .eye {
//     width: 35px;
//     height: 35px;
//     margin-right: 5px;
// }

// .looks .looks_box .fabulous {
//     width: 35px;
//     height: 35px;
//     margin-right: 5px;
// }

.artivle_title {
    margin-right: 11px;
    width: 114px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border: 1px solid #eeeeee; /*no*/
    display: -webkit-box;
    word-break: break-all;
    -webkit-line-clamp: 1;
    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    overflow: hidden;
    text-overflow: ellipsis;
}

.artwenzi {
    font-size: 30px;
    display: -webkit-box;
    word-break: break-all;
    -webkit-line-clamp: 2;
    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    overflow: hidden;
    text-overflow: ellipsis;
    color: #333333;
    margin-bottom: 10px;
    line-height: 35px;
}

.miaoshu {
    height: 170px;
				width: auto;
    margin-top: 20px;
    display:inherit;
    padding:20px;
}

.sebefore {
    background-image: url("https://wximg.meijiabang.com/hkds/miniapp/images/design/down.png");
}
 .child .topstyle {
    color: #999999;
    height: 40px;
    line-height: 40px;
    margin-bottom: 20px;
    width: 90%;
    margin-left: 5%;
    font-size: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.child .topstyle .slectsd {
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 30px;
}

  .caselist .item{
    position: relative;
    height: 170px;
  }
  .article_img{
    margin-top: -10px;
    border-radius: 10px;
    width: 240px;
    height: 170px;
    overflow: hidden;
    image {
        width: 100%;
        height: 100%;
    }
  }
  .article_left {
      width: 388px;
    flex: 0 1 388px;
    padding-right: 42px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    width: 194px;
}
  .article_left .looks{
    // position: absolute;
    // bottom: 0;
    display: flex;
    align-items: center;
  }

.articleListModule {
    position: relative;
    .all_type_body {
        position: absolute;
        top: 32px;
        left: 0;
        width: 100%;
        height: 0;
        overflow-y: auto;
        box-shadow: 0 10px 10px #ddd;
        background-color: #fff;
        z-index: 1;
        .type_body {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            padding: 30px 15px;
            .type_item {
                width: calc(33.33% - 36px);
                height: 70px;
                line-height: 68px;
                text-align: center;
                border-radius: 50px;
                border: 1px solid #ddd; /*no*/
                margin: 0 15px 30px;
            }
            .type_item.active {
                background-color: #ffd11a;
                border: none;
            }
        }
    }
    .openHei {
        animation: maxHeight 0.3s;
        animation-fill-mode: forwards;
    }

    @keyframes maxHeight {
        from {height: 0;}
        to {height: 440px;}
    }

    @-webkit-keyframes maxHeight {
        from {height: 0;}
        to {height: 440px;}
    }
}

</style>
